<!DOCTYPE html>
<html>
<head>
  <script src="three.min.js"></script>
  <script src="./lib/OBJLoader.js"></script>
  <!-- ---------------------------------------------------------------------------

    导入一个OBJ文件
    https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders

   ---------------------------------------------------------------------------- -->
  <script>
    function init() {
      let renderer = new THREE.WebGLRenderer();
      renderer.setSize(500, 375);
      document.body.appendChild(renderer.domElement);
      renderer.setClearColor(0x000000)

      let scene = new THREE.Scene();

      let camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, .01, 800)
      camera.position.set(2, 2, 3);
      camera.lookAt(new THREE.Vector3(0, 0, 0));
      scene.add(camera);

      let light = new THREE.DirectionalLight(0xffffff);
      light.position.set(2, 10, 5);
      scene.add(light);

      let mesh;
      let loader = new THREE.OBJLoader();
      loader.load('./lib/port.obj', function (obj) {
        obj.traverse(function (child) {
          if (child instanceof THREE.Mesh) {
            // 双面显示
            // child.material.side = THREE.DoubleSide;

            // 代码中设置材质
            child.material = new THREE.MeshPhongMaterial({
              color: 0xff0000,
              specular: 0xff0000,
              shininess: 600,
              side: THREE.DoubleSide
            });
          }
        });

        mesh = obj
        scene.add(mesh)
        mesh.position.y = -2

        requestAnimationFrame(function draw() {
          renderer.render(scene, camera);
          mesh.rotation.y += 0.1
          if (mesh.rotation.y > Math.PI * 2) {
            mesh.rotation.y -= Math.PI * 2
          }
          requestAnimationFrame(draw)
        })

        fo()
      });

      function fo() {
        mesh.scale.set(1, 1, 1)
      }
    }
  </script>
</head>
<body onload="init()">
</body>
</html>
